import {AfterViewInit, Component} from '@angular/core';
import * as $ from 'jquery';
import * as G2 from '@antv/g2';

@Component({
  selector: 'app-sparkline',
  templateUrl: './sparkline.component.html',
  styleUrls: ['./sparkline.component.less']
})
export class SparklineComponent implements AfterViewInit {
  data = [{
    index: 1,
    id: 723826463,
    times: 29.6,
    trend: [{
      timeindex: 1,
      value: 721
    }, {
      timeindex: 2,
      value: 327
    }, {
      timeindex: 3,
      value: 982
    }, {
      timeindex: 4,
      value: 735
    }, {
      timeindex: 5,
      value: 67
    }, {
      timeindex: 6,
      value: 123
    }, {
      timeindex: 7,
      value: 167
    }, {
      timeindex: 8,
      value: 403
    }, {
      timeindex: 9,
      value: 741
    }, {
      timeindex: 10,
      value: 114
    }, {
      timeindex: 11,
      value: 171
    }, {
      timeindex: 12,
      value: 330
    }, {
      timeindex: 13,
      value: 964
    }, {
      timeindex: 14,
      value: 835
    }, {
      timeindex: 15,
      value: 12
    }, {
      timeindex: 16,
      value: 349
    }, {
      timeindex: 17,
      value: 601
    }, {
      timeindex: 18,
      value: 230
    }, {
      timeindex: 19,
      value: 567
    }, {
      timeindex: 20,
      value: 135
    }],
    sum: 8574,
    status: '进行中'
  }, {
    index: 2,
    id: 89584746,
    times: 1.6,
    trend: [{
      timeindex: 1,
      value: 90
    }, {
      timeindex: 2,
      value: 63
    }, {
      timeindex: 3,
      value: 85
    }, {
      timeindex: 4,
      value: 43
    }, {
      timeindex: 5,
      value: 85
    }, {
      timeindex: 6,
      value: 21
    }, {
      timeindex: 7,
      value: 24
    }, {
      timeindex: 8,
      value: 75
    }, {
      timeindex: 9,
      value: 73
    }, {
      timeindex: 10,
      value: 82
    }, {
      timeindex: 11,
      value: 57
    }, {
      timeindex: 12,
      value: 44
    }, {
      timeindex: 13,
      value: 35
    }, {
      timeindex: 14,
      value: 57
    }, {
      timeindex: 15,
      value: 39
    }, {
      timeindex: 16,
      value: 45
    }, {
      timeindex: 17,
      value: 52
    }, {
      timeindex: 18,
      value: 75
    }, {
      timeindex: 19,
      value: 35
    }, {
      timeindex: 20,
      value: 30
    }],
    sum: 1100,
    status: '未开始'
  }, {
    index: 3,
    id: 90318249,
    times: 10.4,
    trend: [{
      timeindex: 1,
      value: 19
    }, {
      timeindex: 2,
      value: 37
    }, {
      timeindex: 3,
      value: 33
    }, {
      timeindex: 4,
      value: 40
    }, {
      timeindex: 5,
      value: 25
    }, {
      timeindex: 6,
      value: 10
    }, {
      timeindex: 7,
      value: 44
    }, {
      timeindex: 8,
      value: 31
    }, {
      timeindex: 9,
      value: 25
    }, {
      timeindex: 10,
      value: 39
    }, {
      timeindex: 11,
      value: 34
    }, {
      timeindex: 12,
      value: 21
    }, {
      timeindex: 13,
      value: 46
    }, {
      timeindex: 14,
      value: 33
    }, {
      timeindex: 15,
      value: 47
    }, {
      timeindex: 16,
      value: 24
    }, {
      timeindex: 17,
      value: 11
    }, {
      timeindex: 18,
      value: 24
    }, {
      timeindex: 19,
      value: 48
    }, {
      timeindex: 20,
      value: 34
    }],
    sum: 625,
    status: '失败'
  }, {
    index: 4,
    id: 983927827,
    times: 17.8,
    trend: [{
      timeindex: 1,
      value: 13
    }, {
      timeindex: 2,
      value: 17
    }, {
      timeindex: 3,
      value: 69
    }, {
      timeindex: 4,
      value: 42
    }, {
      timeindex: 5,
      value: 134
    }, {
      timeindex: 6,
      value: 65
    }, {
      timeindex: 7,
      value: 130
    }, {
      timeindex: 8,
      value: 69
    }, {
      timeindex: 9,
      value: 144
    }, {
      timeindex: 10,
      value: 83
    }, {
      timeindex: 11,
      value: 61
    }, {
      timeindex: 12,
      value: 82
    }, {
      timeindex: 13,
      value: 40
    }, {
      timeindex: 14,
      value: 39
    }, {
      timeindex: 15,
      value: 105
    }, {
      timeindex: 16,
      value: 86
    }, {
      timeindex: 17,
      value: 23
    }, {
      timeindex: 18,
      value: 60
    }, {
      timeindex: 19,
      value: 55
    }, {
      timeindex: 20,
      value: 67
    }],
    sum: 1384,
    status: '成功'
  }, {
    index: 5,
    id: 7362764734,
    times: 19.6,
    trend: [{
      timeindex: 1,
      value: 17
    }, {
      timeindex: 2,
      value: 84
    }, {
      timeindex: 3,
      value: 31
    }, {
      timeindex: 4,
      value: 59
    }, {
      timeindex: 5,
      value: 69
    }, {
      timeindex: 6,
      value: 14
    }, {
      timeindex: 7,
      value: 74
    }, {
      timeindex: 8,
      value: 56
    }, {
      timeindex: 9,
      value: 33
    }, {
      timeindex: 10,
      value: 22
    }, {
      timeindex: 11,
      value: 79
    }, {
      timeindex: 12,
      value: 92
    }, {
      timeindex: 13,
      value: 11
    }, {
      timeindex: 14,
      value: 9
    }, {
      timeindex: 15,
      value: 87
    }, {
      timeindex: 16,
      value: 26
    }, {
      timeindex: 17,
      value: 29
    }, {
      timeindex: 18,
      value: 87
    }, {
      timeindex: 19,
      value: 74
    }, {
      timeindex: 20,
      value: 89
    }],
    sum: 1042,
    status: '异常'
  }];

  constructor() {
  }


  ngAfterViewInit(): void {
    // append data
    const $tbody = $('.g2-table').children('tbody');
    this.data.forEach(function(d, index) {
      // create container
      const $tr = $('<tr class="g2-table-row"></tr>');
      $tbody.append($tr);
      // index
      const $index = $('<td class="g2-table-column g2-table-column-index">' + d.index + '</td>');
      $tr.append($index);
      // id
      const $id = $('<td class="g2-table-column">' + d.id + '</td>');
      $tr.append($id);
      // time
      const timeID = 'bar-chart-' + index;
      const $time = $('<td class="g2-table-column"><div class="chartContainer" id="' + timeID + '"></div></td>');
      $tr.append($time);
      createSingleBarChart(timeID, [{
        value: d.times
      }]);
      // data
      const dataID = 'line-chart-' + index;
      const $data = $('<td class="g2-table-column"><div class="chartContainer" id="' + dataID + '"></div></td>');
      $tr.append($data);
      createMiniLineChart(dataID, d.trend, d.sum);
      // 状态
      const Class = getStatusType(d.status);
      const $status = $('<td class="g2-table-column g2-table-column-index' + Class + '"><li><span>' + d.status + '</span></li></td>');
      $tr.append($status);
    });

    function createSingleBarChart(containerId, data) {
      const chart = new G2.Chart({
        container: containerId,
        forceFit: true,
        height: 30,
        padding: [10, 50, 10, 10]
      });
      chart.source(data, {
        value: {
          max: 30,
          min: 0
        }
      });
      chart.legend(false);
      chart.axis(false);
      chart.tooltip({
        type: 'mini'
      });
      chart.animate(true);
      chart.coord('rect').transpose();
      chart.interval().position('1 * value').opacity(1).size(20).label('value', {
        offset: 10,
        textStyle: {
          fontSize: 12,
          fill: '#595959'
        },
        formatter: function formatter(val) {
          return val + '万';
        }
      });
      chart.render();
    }

    function createMiniLineChart(containerId, data, sum) {
      const chart = new G2.Chart({
        container: containerId,
        forceFit: true,
        height: 30,
        padding: [5, 50, 5, 5]
      });
      chart.source(data);
      chart.legend(false);
      chart.axis(false);
      chart.tooltip({
        type: 'mini'
      });
      chart.area().position('timeindex*value').shape('smooth').opacity(0.2);
      chart.line().position('timeindex*value').opacity(1).shape('smooth');
      chart.guide().html({
        position: ['105%', '0%'],
        html: '<div class="g2-guide-html"><p class="title">总计</p><p class="value">' + sum + '</p></div>'
      });
      chart.render();
    }

    function getStatusType(s) {
      if (s === '进行中') {
        return ' in-processing';
      }
      if (s === '未开始') {
        return ' before-start';
      }
      if (s === '失败') {
        return ' fail';
      }
      if (s === '成功') {
        return ' sucess';
      }
      if (s === '异常') {
        return ' abnormal';
      }
    }
  }

}
